
<style lang="scss" scoped>
.center {
	max-width: 1920px;
	height: 100vh;
	background-image: url('https://account-img.geekpark.net/assets/bg-0408a9c8a4bef462edebe9867d17b80fececf11dd6418f096f42ee14582305fb.svg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0 auto;
}

h1 {
	font-size: 30px;
	color: black;
    margin-top: 50px;
}

.logon {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	/* position: relative;
		overflow: hidden; */
	width: 70%;
	max-width: 100%;
	min-height: 480px;
	margin-top: 20px;
	display: flex;
	background: -webkit-linear-gradient(right, #4284db, #29eac4);
}

.overlaylong {
	border-radius: 10px 0 0 10px;
	width: 50%;
	height: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.overlaylongleft {
	border-radius: 0px 10px 10px 0px;
	width: 50%;
	height: 100%;
	background-color: #fff;
	transform: translateX(100%);
	transition: transform 0.6s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
}

.h5_overlaylongleft {
	border-radius: 0px 10px 10px 0px;
	height: 100%;
	background-color: #fff;
	transform: translateY(100%);
	transition: transform 0.6s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0 20px 0;
	
}

.overlaylongright {
	border-radius: 10px 0 0 10px;
	width: 50%;
	height: 100%;
	background-color: #fff;
	transform: translateX(0%);
	transition: transform 0.6s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
}
.h5_overlaylongright{
	border-radius: 10px 0 0 10px;
	height: 100%;
	background-color: #fff;
	transform: translateY(0%);
	transition: transform 0.6s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0 20px 0;

}

.overlaytitle {
	border-radius: 0px 10px 10px 0px;
	width: 50%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
}


.overlaytitleH2 {
	font-size: 30px;
	color: #fff;
	margin-top: 20px;
}

.overlaytitleP {
	font-size: 15px;
	color: #fff;
	margin-top: 20px;
}

.overlaytitleleft {
	border-radius: 0px 10px 10px 0px;
	width: 50%;	
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateX(0%);
	transition: transform 0.6s ease-in-out;
}
.h5_overlaytitleleft{
	border-radius: 0px 10px 10px 0px;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(0%);
	transition: transform 0.6s ease-in-out;
	padding: 20px 0 20px 0;

}
.overlaytitleright {
	border-radius: 0px 10px 10px 0px;
	width: 50%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateX(-100%);
	transition: transform 0.6s ease-in-out;
}
.h5_overlaytitleright{
	border-radius: 0px 10px 10px 0px;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-100%);
	transition: transform 0.6s ease-in-out;
	width: 90%;
	margin: 0 auto;
	padding: 20px 0 20px 0;
}
.overlaytitle-Signin {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.overlaytitle-Signup {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.buttongohs {
	width: 180px;
	height: 40px;
	border-radius: 50px;
	border: 1px solid #fff;
	color: #fff;
	font-size: 15px;
	text-align: center;
	line-height: 40px;
	margin-top: 40px;
}

.overlaylongH2 {
	font-size: 25px;
	color: black;
	/* width: 250px; */
}

.overlaylongH2_login{
	--color: #29eac4;
	padding: 0.5em 1.7em;
	background-color: transparent;
	border-radius: .3em;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: .5s;
	font-weight: 400;
	font-size: 17px;
	border: 1px solid;
	font-family: inherit;
	text-transform: uppercase;
	color: var(--color);
	z-index: 1;
	width: 70%;
	text-align: center;
	border-radius: 34px;
	margin-top: 20px;
}


.overlaylongH2_login::before, .overlaylongH2_login::after {
 content: '';
 display: block;
 width: 50px;
 height: 50px;
 transform: translate(-50%, -50%);
 position: absolute;
 border-radius: 50%;
 z-index: -1;
 background-color: var(--color);
 transition: 1s ease;

}

.overlaylongH2_login::before {
 top: -1em;
 left: -1em;
}

.overlaylongH2_login::after {
 left: calc(100% + 1em);
 top: calc(100% + 1em);
}

.overlaylongH2_login:hover::before, .overlaylongH2_login:hover::after {
 height: 410px;
 width: 410px;
}

.overlaylongH2_login:hover {
	color: white;
}

.overlaylongH2_login:active {
 filter: brightness(.8);
}
.overlaylong-Signin {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.overlaylong-Signup {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

input {
	background-color: #eee;
	border: none;
	padding: 12px 15px;
	margin: 10px 0;
	width: 240px;
}

.ForgotPassword{
	display: flex;
	width: 100%;
	justify-content: space-between;
	h3 {
		font-size: 10px;
		margin-top: 10px;
		cursor: pointer;
		text-align: right;
		transform: scale(0.9);
	}

}

.inupbutton {
	background-color: #29eac4;
	border: none;
	width: 180px;
	height: 40px;
	border-radius: 50px;
	font-size: 15px;
	color: #fff;
	text-align: center;
	line-height: 40px;
	margin-top: 30px;
	margin-block: 10px;
}

.Wchat_login{
	width: 30%;
	display: flex;
	img{
		width: 20%;
	}
}
.MongolianLayer{
	position: absolute;
	width: 100%;
}
@media (max-width: 768px) {
	.ForgotPassword{
		width: 70%;
	}
  .logon{
    display: flex;
    flex-direction: column;
    width: 90%;
    text-align: center;
    .overlaylong{
      width: 100%;
     transform: translateY(100%);
    }
    .overlaytitle{
      width: 100%;
      transform: translateY(-100%);
    }
  }
  .overlaylong-Signin{
	width: 100%;
	// padding: 80px 0 80px 0;
  }
  .overlaytitle-Signin{
	width: 90%;
	// padding: 80px 0 80px 0;
  }
  .center{
		justify-content: flex-start;
  }

}
input {
    outline: none;
}

</style>

<template>
	<div class="center">
		<h1>极客公园</h1>

		<slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            ></slide-verify>
<div>{{msg}}</div>

		<div class="logon">
			
			<div :class="overlaylong">
				<div class="overlaylong-Signin" v-if="disfiex == 0">
					<h2 class="overlaylongH2">登录账号</h2>
					<input type="text" placeholder="user">
					<input type="text" placeholder="password">
					<div class="ForgotPassword">
							<!-- <input type="checkout" placeholder="checkout"> -->
							<h3 @click="Signin">点击注册？</h3>
							<h3>忘记密码？</h3>
					</div>
					<button class="overlaylongH2_login">登录</button>
<!-- 
					<div class="Wchat_login" >
								<img src="../assets/wchat.png" alt="">
								<img src="../assets/wb.png" alt="">
					</div> -->
				</div>
				<div class="overlaylong-Signup" v-if="disfiex == 1">
					<h2 class="overlaylongH2">注册账号</h2>
					<input type="text" placeholder="user">
					<input type="text" placeholder="password">
					<button class="inupbutton">注册</button>
				</div>
			</div>
			<div :class="overlaytitle">
				<div class="overlaytitle-Signin" v-if="disfiex == 0">
					<h2 class="overlaytitleH2">WELCOME TO GEEKPARK!</h2>
					<p class="overlaytitleP">
						请输入账号和密码登录我们的平台
					</p>
				</div>
				<div class="overlaytitle-Signup" v-if="disfiex == 1">
					<h2 class="overlaytitleH2">Welcome Back!</h2>
					<p class="overlaytitleP">请使用您的个人信息登录</p>
					<div class="buttongohs" @click="Signup">点击登录</div>
				</div>
			</div>
		</div>
		<!-- <el-input placeholder="请输入验证码" type="text" v-model="tform.inputma">
		</el-input> -->
		<span v-html="src" @click="getma">
		</span>
		<!-- <div v-if="this.isMongolianLayer" class="MongolianLayer">
			<VerificationCode />
		</div> -->
	</div>
</template>
<script>
import axios from 'axios'
// import VerificationCode from './VerificationCode.vue'
export default {
	name:"HomeView",
	data() {
		return {
			isMongolianLayer:true,
			tform: {
				inputma: ''
			},
			overlaylong: 'overlaylong',
			overlaytitle: 'overlaytitle',
			disfiex: 0,
			src: '',
			text: '',
			msg: '',
		}
	},
	// components:{
	// 	VerificationCode
	// },
	methods: {
		onSuccess(){
			console.log('cehsi onSuccess');
                this.msg = 'login success'
            },
            onFail(){
			console.log('cehsi onFail');

                this.msg = ''
            },
            onRefresh(){
			console.log('cehsi onRefresh');

                this.msg = ''
            },
		async getma() {
			console.log('我代纳基了');
			let { data } = await axios.get("http://localhost:3000/get_svg")
			console.log('data.data', data.data);
			this.src = data.data
			// this.text=data.text
			// this.$refs.captcha.src = data.data + Date.now();
		},
		Signin() {
			if(document.documentElement.clientWidth>768){
				this.overlaylong = "overlaylongleft"
				this.overlaytitle = "overlaytitleright"
				setTimeout(() => {
					this.disfiex = 1
				}, 200)
			}else{
				this.overlaylong = "h5_overlaylongleft"
				this.overlaytitle = "h5_overlaytitleright"
				setTimeout(() => {
					this.disfiex = 1
				}, 200)
			}
			
		},
		Signup() {
			if(document.documentElement.clientWidth>768){
				this.overlaylong = "overlaylongright"
				this.overlaytitle = "overlaytitleleft"
				setTimeout(() => {
					this.disfiex = 0
				}, 200)
			}else{
				this.overlaylong = "h5_overlaylongright"
				this.overlaytitle = "h5_overlaytitleleft"
				setTimeout(() => {
					this.disfiex = 0
				}, 200)
			}
		}
	}
}
</script>